<template>
  <div>
    <div class="chart-box">
      <el-row :gutter="45">
        <el-col :span="6" :offset="3">
          <el-card class="charBox">
            <div class="count1"><span>{{ CountOne }}</span></div>
            <div class="a">用户数量</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="charBox">
            <div class="count2"><span>{{ CountTwo }}</span></div>
            <div class="b">
              接管API数量
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="charBox">
            <div class="count3"><span :key="new Date().getTime()">{{ getRunnedTime }}</span></div>
            <div class="b">
              运行天数
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-card id="apiIncrease">
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card id="userIncrease">
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {CountApi} from "@/core/request/api/CountApi";

export default {
  name: "dataPage",
  data() {
    return {
      CountOne: '',
      CountTwo: '',
      countRunning: null,
      authColumns: [],
      authValues: [],
      userColumns: [],
      userValues: [],
    }
  },
  mounted() {
    this.getincreaseCount(),
    this.getGraphIncDataWithUser(),
    this.getUserCount(),
    this.getHomeCount()
    this.getRunningTime()
  },
  computed: {
    getRunnedTime() {
      var old_date = new Date(this.countRunning); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
      // eslint-disable-next-line no-constant-condition
      var new_date = new Date(); //新建一个日期对象，默认现在的时间
      var difftime = (new_date - old_date) / 1000; //计算时间差,并把毫秒转换成秒
      var days = parseInt(difftime / 86400); // 天  24*60*60*1000
      var hours = parseInt(difftime / 3600) - 24 * days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数
      var minutes = parseInt(difftime % 3600 / 60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
      var seconds = parseInt(difftime % 60);  // 以60秒为一整份 取余 剩下秒数
      return (days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒");

    }
  },
  methods: {

    getUserCount() {
      this.axios.get(CountApi.userCount).then(res => {
        if (!res.data.code){
          this.CountOne = res.data.data
        }
      })
    },
    getRunningTime() {
      this.axios.get(CountApi.runTime).then(res => {
        if (!res.data.code)         this.countRunning = res.data.data

        // console.log(res)
      })
    },
    getHomeCount() {
      this.axios.get(CountApi.docCount).then(res => {
        if (!res.data.code) this.CountTwo = res.data.data
      })
    },
    getincreaseCount() {
      this.axios.get(CountApi.increaseCount, {
        params: {
          day: 7,
        }
      }).then(res => {
        if (!res.data.code){
          this.authColumns = res.data.data.columns
          this.authValues = res.data.data.values
          if (null != this.authColumns && null != this.authValues && this.authColumns.length > 0 && this.authValues.length > 0){
            this.setApiGraph()
          }
        }
      })
    },
    getGraphIncDataWithUser() {
      this.axios.get(CountApi.userIncCount, {
        params: {
          day: 7,
        }
      }).then(res => {
        if (!res.data.code){
          this.userColumns = res.data.data.columns
          this.userValues = res.data.data.values
          if (null!=this.userColumns && null!=this.userValues && this.userValues.length > 0 &&  this.userValues.length > 0) {
            this.setUserGraph()
          }
        }

      })
    },
    setApiGraph() {
      // 基于准备好的dom，初始化echarts实例
      const apiIncrease = echarts.init(document.getElementById('apiIncrease'));
      const option = {
        title: {
          text: 'API接口日增量',
          left: 'center',
          top: '5px',
        },
        toolbox: {
          // 工具栏
          show: true, // 要显示
          feature: {
            // 各工具配置项
            mark: {show: true}, // 辅助线开关
            dataView: {show: true, readOnly: false}, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            magicType: {show: true, type: ['bar']}, // 动态类型切换
            restore: {show: true}, // 配置项还原
            saveAsImage: {show: true} // 点击保存下载图片
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            }
          },
        },
        xAxis: {
          name: '时间',
          type: 'category',
          data: this.authColumns
        },
        yAxis: {
          name: '增加数量',
          type: 'value'
        },
        series: [
          {
            name: '增加数量',
            data: this.authValues,
            type: 'line'
          }
        ]
      };
      apiIncrease.setOption(option)
    },
    setUserGraph() {
      // 基于准备好的dom，初始化echarts实例
      const userIncrease = echarts.init(document.getElementById('userIncrease'));
      const option = {
        title: {
          text: '用户日增量',
          left: 'center',
          top: '5px',
        },
        toolbox: {
          // 工具栏
          show: true, // 要显示
          feature: {
            // 各工具配置项
            mark: {show: true}, // 辅助线开关
            dataView: {show: true, readOnly: false}, // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            magicType: {show: true, type: ['bar']}, // 动态类型切换
            restore: {show: true}, // 配置项还原
            saveAsImage: {show: true} // 点击保存下载图片
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            }
          },
        },
        xAxis: {
          name: '时间',
          type: 'category',
          data: this.userColumns
        },
        yAxis: {
          name: '增加数量',
          type: 'value'
        },
        series: [
          {
            name: '增加数量',
            data: this.userValues,
            type: 'line'
          }
        ]
      };
      userIncrease.setOption(option)
    }
  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.count1 {
  position: relative;
  font-style: normal;
  font-size: 70px;
  font-family: 'Arial';
  color: #83a2ed;
  line-height: 120px;
  text-align: center;
}

.count2 {
  font-style: normal;
  font-size: 70px;
  font-family: 'Arial';
  color: #83a2ed;
  line-height: 120px;
  text-align: center;
}

.count3 {
  font-style: normal;
  font-size: 25px;
  font-family: 'Arial';
  color: #83a2ed;
  line-height: 120px;
  text-align: center;
}

.charBox .a {
  font-style: normal;
  font-size: 29px;
  font-family: 'Arial';
  background-color: #ffffff;
  color: #83a2ed;
  bottom: 0px;
  text-align: center;
}

.charBox .b {
  font-style: normal;
  font-size: 29px;
  font-family: 'Arial';
  background-color: #ffffff;
  color: deepskyblue;
  bottom: 0px;
  text-align: center;
}

#apiIncrease {
  width: 550px;
  height: 250px;
  margin: 35px auto;
  border-radius: 20px;
  border: 1px solid #83a2ed;
}

#userIncrease {
  width: 550px;
  height: 250px;
  margin: 35px auto;
  border-radius: 20px;
  border: 1px solid #83a2ed;
}
</style>
